<template>
	<fieldset>
		<legend>计数器</legend>
		<button @click="decrement">-</button>
		&nbsp;
		&nbsp;
		<!-- <span>{{$store.state.num}}</span> -->
        <span>{{num}}</span>
        <!-- {{title}} -->
		&nbsp;
		&nbsp;
		<!-- <button @click="increment">+</button> -->
		<button @click="INCREMENT(998)">+</button>
	</fieldset>
</template>
<style>
    span {
        font-size:30px;
    }
</style>
<script>
    //如果说在组件的实例中,我们需要通过this.$store.state.xxx
    //vuex还提供了辅助函数能够让我们更方便的访问vuex中sttore的成员
    import {mapState,mapMutations} from "vuex"
    //mapMutations要映射在methods属性中
    //mapState需要映射在computed这个属性中

    //通过mutation来变更state的状态,vuex规定,mutation是变更vuex中state的唯一方式
    //state只要发生了变化,那么视图组件就会更新

	export default {
        computed:{
            ...mapState(["num","title"])
        },
        mounted(){
            console.log(this.$store.state.num)
        },
        methods:{
            ...mapMutations(["INCREMENT","DECREMENT"]),
            increment(){
                //普通方式去触发mutations中定义的方法
                // this.$store.commit("INCREMENT","一些参数99")
                // this.INCREMENT('映射的参数99')
            },
            decrement(){
                //其实 mutations并不是变更state的唯一方式
                //但是我们要按照vuex的设计规范来 使用mutation来进行变更
                this.$store.state.num--
            }
        }
	}
</script>